<template>
    <div>
        <NavHeader></NavHeader>
        <div class="middle">
            <div class="miiddleHeader">
                <div>红米Note7</div>
                <div>
                    <ul class="phoneDes">
                        <li>概述</li>
                        <li>参数</li>
                        <li class="special">用户评价</li>
                    </ul>
                </div>
            </div>
            <div class="middleContent">
                <div class="container">
     <swiper :options="SwiperOption">
         <swiper-slide>
            <img class="swiperImg" src="../../public/imgs/detail/phone-1.jpg" width="100%"/>
         </swiper-slide>
         <swiper-slide>
         <img class="swiperImg" src="../../public/imgs/detail/phone-2.jpg" width="100%"/>
         </swiper-slide>
         <swiper-slide>
             <img class="swiperImg" src="../../public/imgs/detail/phone-3.jpg" width="100%"/>
         </swiper-slide>
         <swiper-slide>
             <img class="swiperImg" src="../../public/imgs/detail/phone-4.jpg" width="100%"/>
         </swiper-slide>
     <div class="swiper-pagination" slot="pagination"></div>
     </swiper>
            </div>
            <div class="middleRight">
                <div class="name">红米Note7</div>
                <div>
                相机全新升级 / 960帧超慢动作 / 手持超级夜景 / 全球首款双频GPS / 骁龙845处理器 / 红<br />外人脸解锁 / AI变焦双摄 / 三星 AMOLED 屏
                </div>
                <div class="own">小米自营</div>
                <div class="price">
                    <div>999元</div>
                    <div class="gray">1999元</div>
                </div>
                <div class="place">
                    <div class="loc">
                        <img src="../../public//imgs/detail/icon-loc.png" alt="">
                    </div>
                    <div>
                        <div>北京 北京市 朝阳区 安定门街道</div>
                        <div>有现货</div>
                    </div>
                </div>
                <div class="version">选择版本</div>
                <div class="configurationBox">
                    <div class="configuration">6GB+64GB 全网通</div>
                    <div class="configuration">4GB+64GB 移动4G</div>
                </div>
                <div class="version">选择颜色</div>
                <div class="color">
                    <div class="DarkGrey"></div>
                    <div>深空灰</div>
                </div>
                <div class="total">
                    <div class="totalContent">
                        <div>红米Note 76GB 全网通 深灰色</div>
                        <div>999元</div>
                    </div>
                    <div  class="totalPrice">总计：999元</div>
                </div>
                <div class="shopCar">
                    加入购物车
                </div>
            </div>
            </div>
        </div>
        <NavFooter></NavFooter>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import NavHeader from "../components/NavHeader.vue"
import NavFooter from "../components/NavFooter.vue"
export default {
  name: 'Detail',
  data() {
			return {
				SwiperOption: {
					pagination: {
						el: '.swiper-pagination', //与slot="pagination"处 class 一致
						clickable: true, //轮播按钮支持点击
					},
					//自动播放
					autoplay: {
						delay: 2000,
						disableOnInteraction: false
					},
					//循环
					loop:true
				},
			}
		},
  components: {
    NavHeader,
    NavFooter,
    swiper,
	swiperSlide
  }
}
</script>
<style>
.miiddleHeader{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-left: 10px;
}
.phoneDes{
    margin-right: 10px;
    list-style: none;
    display: flex;
}
.phoneDes li{
    padding: 0 10px;
    border-right: 1px solid lightgray;
}
.phoneDes .special{
    border: none;
}
.middleContent{
    display: flex;
    justify-content: space-between;
    margin-top: 60px;
}
.container{
    width: 600px;
}
.swiper-pagination{
    width: 160px;
}
.swiperImg{
    width:600px;
}
.middleRight .name{
    font-size: 30px;
}

.middleRight .price{
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid lightgray;
}
.place{
    padding: 20px 0;
    margin-top: 30px;
    background: rgb(250, 250, 250);
    display: flex;
}
.loc{
    margin-left: 20px;
    margin-top: 2px;
    margin-right: 10px;
}
.loc img{
    width: 16px;
}
.version{
    margin-top: 40px;
    font-size: 20px;
}
.own{
    margin-top: 10px;
    color: orange;
}
.price .gray{
    text-decoration: line-through;
    color: gray;
    margin-left: 4px;
}
.configurationBox{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}
.configuration{
    padding: 10px 80px;
    border: 1px solid gray;
}
.DarkGrey{
    width: 10px;
    height: 10px;
    background-color: darkgray;
}
.color{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
    padding: 10px 80px;
    border: 1px solid orange;
    color: orange;
    margin-top: 20px;
}
.total{
    background: rgb(250, 250, 250);
    margin-top: 20px;
}
.total .totalContent{
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
}
.totalPrice{
    color: orange;
    font-size: 20px;
}
.shopCar{
    margin-top: 20px;
    width: 100px;
    padding: 10px 20px;
    background: rgb(255, 102, 0);
    color: white;
    margin-bottom: 40px;
}
</style>